<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:include page="header.jsp">
	<jsp:param name="pageTitle" value="${community.name}" />
</jsp:include>
<script type="text/javascript">
	var eventId = ${event.id};
	var communityId = ${community.id};
	var contributeObj;
</script>
<c:if test="${not empty sessionUser}">
	<script type="text/javascript">
		$(function() {
			// contribute to stuff method		
			$("#contributeStuffButton").click(function() {

				contributeObj = {
					eventID : eventId,
				//amountContributed : $("#stAmountContributed").val()
				//userPhone : $("#stPhone").val(),
				};

				console.log(JSON.stringify(contributeObj));
				$.ajax({
					url : "contribute",
					type : "POST",
					data : JSON.stringify(contributeObj),
					contentType : "application/json",
					accepts : "application/json"
				}).done(function(s) {
					if (s == null) {
						console.alert("Please fill the required fields.");
						return;
					}
					console.log("success for add stuff " + s);

					$("#contributeStuff").modal('hide');
				}).error(function(e) {
					contributeObj = e;
					console.log("error for contribute stuff " + e);
					alert("An error occurred. Please try again.");
				});
			});
		});
	</script>
</c:if>
<style type="text/css">
.datepicker {
	z-index: 1151 !important;
}

.container-fluid {
	margin-top: 40px;
	padding-bottom: 50px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.left-clm-comm-detail {
	position: relative;
	min-height: 1px;
}

.label-comm-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 16px;
}

.label-stuff-name-detail {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.label-welcome {
	color: #f05607;
	display: inline;
	text-align: center;
	font-size: 20px;
}

.comm-detail,.comm-name-detail {
	border: auto;
	border: 1px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.stuff-detail,.stuff-name-detail {
	border: auto;
	border: 5px solid #E8EDED;
	padding: 10px 40px;
	background: #FFFFFF;
	width: 100%;
	border-radius: 25px;
	margin: 3px 3px;
	position: relative;
}

.member {
	margin-top: 30px;
	width: 100%;
	height: 40px;
	font-size: x-large;
}

.right-stuff-detail-number {
	color: #f05607;
	font-size: 80px;
	line-height: 40px;
}

.right-stuff-detail-explanation {
	color: #f05607;
	font-size: 14px;
	line-height: 40px;
}

#stuffDetail {
	margin-top: 30px;
}

.btn-group-vertical {
	padding: 10px 40px;
	width: 30%;
	margin: 3px 3px;
	position: relative;
	float: right;
	right: 27px;
}
</style>
<div class="container-fluid">

	<div class="row">
		<!-- Left column for description -->
		<div class="col-md-3 no-float left-clm-comm-detail">
			<div class="comm-name-detail">
				<label class="label-comm-name-detail">${community.name}</label>
			</div>
			<div class="comm-detail">
				<td>${community.description}</td>
			</div>
			<c:if test="${not empty sessionUser}">
			</c:if>
		</div>
		<!-- details of the stuff -->
		<div class="col-md-9 no-float">
			<div class="row">
				<div class="col-md-8 no-float">
					<div class="col-md-11 stuffItem"></div>

					<%-- <div class="stuff-detail">
							<td>${stuff.amountRequested}</td>
						</div> --%>
					<div class="stuff-name-detail">
						<label class="label-comm-name-detail">${event.name}</label>
					</div>
					<div class="stuff-detail">
						<td>${event.description}</td>
					</div>
					<div class="stuff-detail">
						<td>${event.datetime}</td>
					</div>
					<div class="stuff-detail">
						<td>${event.location}</td>
					</div>
					<c:if test="${not empty sessionUser}">
						<div class="btn-group-vertical" role="group" aria-label="...">
							<a href="#" data-toggle="modal" type="button" align="center"
								class="btn btn-lg btn-primary" data-target="#contributeEvent">Attend
							</a>
						</div>
					</c:if>
				</div>
				<div class="col-md-3 no-float">
					<div class="col-md-3 stuffItem" id="stuffDetail">
						<div>
							<strong class="right-stuff-detail-number">${feedItems.size()}</strong>
						</div>
						<div>
							<strong class="right-stuff-detail-explanation">&nbsp;attendee</strong>
						</div>
						</br>
					</div>
				</div>
				<!-- activity feed column -->
				<div class="col-md-12 no-float">
					<div id="allActivities" style="margin-left:18px;">
						<c:choose>
							<c:when
								test="${feedItems.size() == 0}">
								<span id="noActivities">There is no activity.</span>
							</c:when>
							<c:otherwise>
								<c:forEach var="fi" items="${feedItems}">
									<c:choose>
										<c:when test='${fi.role eq "MODERATOR"}'>
											<div class="row">
												${fi.userName} created the event
												<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
												.
											</div>
										</c:when>
										<c:otherwise>
											<div class="row">
												${fi.userName} declared attendance for the event
												<c:if test="${not empty fi.insertionDate}"> at ${fi.insertionDate} </c:if>
												.
											</div>
										</c:otherwise>
									</c:choose>
									<br>
								</c:forEach>
							</c:otherwise>
						</c:choose>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
